﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SignalR Simple Chat</title>
    <style type="text/css">
        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="button" value="注册" id="registered" />
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <ul id="discussion"></ul>
    </div>
    <!--脚本参考 -->
    <!--引用jQuery库。 -->
    <script src="~/Scripts/jquery-1.6.4.min.js"></script>
    <!--参考SignalR库。 -->
    <script src="~/scripts/jquery.signalR-2.2.2.js"></script>
    <!--参考自动生成的SignalR集线器脚本。 -->
    <script src="~/signalr/hubs"></script>
    <!--添加脚本来更新页面并发送消息。-->
    <script type="text/javascript">
        function FormatTimeToNow(time) {
            var date;
            if ($.trim(time)) {
                date = new Date(time);
            } else {
                date = new Date();
            }
            var year = date.getFullYear().toString();
            var month = (date.getMonth() + 1);
            var day = date.getDate().toString();
            var hour = date.getHours().toString();
            var minutes = date.getMinutes().toString();
            var seconds = date.getSeconds().toString();
            if (month < 10) {
                month = "0" + month;
            }
            if (day < 10) {
                day = "0" + day;
            }
            if (hour < 10) {
                hour = "0" + hour;
            }
            if (minutes < 10) {
                minutes = "0" + minutes;
            }
            if (seconds < 10) {
                seconds = "0" + seconds;
            }
            return year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds;
        }
        $(function () {
            // 声明一个代理来引用中枢。
            $.connection.hub.logging = true;
            var chat = $.connection.chatHub;
            // 创建集线器可以呼叫广播消息的功能。
            chat.client.broadcastMessage = function (name, message) {
                // Html编码显示名称和消息。
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // 将消息添加到页面。
                var l = $('#discussion li');
                if (l.length > 20) {//prepend
                    l.eq(-1).remove();
                }
                $('#discussion').prepend('<li><strong>' + encodedName
                    + '</strong>:  ' + encodedMsg + '-------接收时间：' + FormatTimeToNow() + '</li>');
            };



            // 将初始焦点设置为消息输入框。
            $('#message').focus();
            // 开始连接。
            $.connection.hub.start().done(function () {

            });
        });
    </script>
</body>
</html>
